<template>
	<view class="w-full p-4">
		<text class="text-lg font-bold mb-4">JZ UnoCSS 演示</text>
		
		<!-- 布局演示 -->
		<view class="flex-center bg-primary text-white p-4 rounded mb-4">
			<text>居中布局</text>
		</view>
		
		<!-- 间距演示 -->
		<view class="bg-f5f5f5 p-4 rounded mb-4">
			<view class="bg-white p-2 mb-2 rounded">
				<text class="text-333">内边距演示</text>
			</view>
			<view class="bg-white p-4 rounded">
				<text class="text-666">更大的内边距</text>
			</view>
		</view>
		
		<!-- 响应式演示 -->
		<view class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 bg-success text-white p-4 rounded">
			<text>响应式宽度</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'JzUnocssDemo'
}
</script>

<style>
/* 引入智能提示文件 */
@import './class-name.scss';
</style> 